<template>
  <div style="padding-top: 16px;">
    <t-row :gutter="10">
      <t-col span="8" >
        <div class="demoCol"></div>
      </t-col>
      <t-col span="12" :offset="4">
        <div class="demoCol"></div>
      </t-col>
    </t-row>
    <t-row :gutter="10" class="demoRow">
    <t-col span="6" >
        <div class="demoCol"></div>
      </t-col>
      <t-col span="11" :offset="4">
        <div class="demoCol"></div>
      </t-col>
      <t-col span="2" :offset="1">
        <div class="demoCol"></div>
      </t-col>
    </t-row>
  </div>
</template>
<script>
import tRow from "../../../src/components/row";
import tCol from "../../../src/components/col";
export default {
  components: { tRow, tCol },
  data() {
    return {};
  }
};
</script>


<style scoped>
* {
  box-sizing: border-box;
}
.demoRow {
  margin: 10px 0;
}
.demoCol {
  height: 50px;
  border: 1px solid rgb(54, 191, 255);;
  border-radius: 4px;
  background: rgb(54, 191, 255);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>